<template>
<div class='idCardInfo'>
    <div class='nav'>
        <!-- <div class='back' @click='back'></div> -->
        <p>身份验证</p>
    </div>
    <div class='info'>
        <div>
            <p><strong>姓名</strong></p>
            <van-field v-model="name"  placeholder="请输入姓名" />
        </div>
        <div>
          <p><strong>证件类型</strong></p>
            <van-field v-model="cardType" readonly @click='idTypeSelectShow=true' is-link  />
        </div>
        <div>
            <p><strong>证件号码</strong></p>
            <van-field v-model="cardNumber" maxlength='18' placeholder="请输入证件号码" />
        </div>
        <div class='readed'>
            <label>
               <van-checkbox shape="square" icon-size="16px" checked-color="#22A088" v-model="checked"></van-checkbox>
                我已阅知<span style='color:#1C70D7' @click='readEdBtnShow=true'>《隐私保护政策》</span>
            </label>
        </div>
        <div> <van-button round block type="info" native-type="submit"  @click='infoBtn()'>提交</van-button></div>
    </div>
    <!-- 弹窗 -->
    <van-popup v-model="idTypeSelectShow"   position="bottom" :style="{ height: '40%' }">
         <van-picker show-toolbar :columns="cardTypeList" @confirm="onConfirm" @cancel="onCancel"/>
    </van-popup>
    <Header v-if='readEdBtnShow' :clickLeft="clickLeft" titleValue='隐私保护政策'></Header>
    <Hgreement v-if='readEdBtnShow'></Hgreement>

</div>
</template>
<script lang="ts">
import '../../style/reservaIndex_index.css';
import 'vant/lib/popup/style';
import 'vant/lib/field/style';
import 'vant/lib/button/style';
import 'vant/lib/checkbox/style';
import 'vant/lib/picker/style';
import 'vant/lib/toast/style';
import 'vant/lib/dialog/style';
import { Popup ,Field,Button,Checkbox,Picker,Toast,Dialog   } from 'vant';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { cloudApi } from '@/api/indexApi';
import Hgreement from '@/components/agreement.vue';
import Header from '@/components/Header.vue';
@Component({
  components: {
    Hgreement,Header,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [Button.name]: Button,
    [Checkbox.name]: Checkbox,
    [Picker.name]: Picker,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
  },
})
export default class MainPage extends Vue {
   userDate: any ;
   name: string = '';
   cardType: string = '居民身份证';//证件类型文字
   cardTypeValue: string = '01';//证件类型value
   cardNumber: string = '';
   checked:boolean=false;//是否选中
   readEdBtnShow:boolean=false;//是
   idTypeSelectShow:boolean=false;//证件类型弹窗
   cardTypeList:any=[ 
       {value:'01',text: '居民身份证'},
        {value:'02',text: '居民户口簿'},
        {value:'03',text: '驾驶证'},
        {value:'04',text: '中国因公护照'},
        {value:'05',text: '中国因私护照'},
        {value:'06',text: '往来港澳通行证'},
        {value:'07',text: '大陆居民往来台湾通行证'},
        {value:'08',text: '军官证/警官证'},
        {value:'09',text: '士兵证'},
        {value:'10',text: '军官离退休证'},
        {value:'11',text: '港澳居民来往内地通行证'},
        {value:'12',text: '台湾居民来往大陆通行证'},
        {value:'13',text: '香港身份证'},
        {value:'14',text: '澳门身份证'},
        {value:'15',text: '台湾身份证'},
        {value:'16',text: '外国护照'},
        {value:'17',text: '外国人永久居留证'},
        {value:'18',text: '港澳台居民居住证'},
        {value:'29',text: '其它个人证件'},
        ]
  created() {
    document.title = '注册'
    let userData:any=sessionStorage.getItem('userData')
    this.userDate = JSON.parse(userData)
    console.log( this.userDate )
  }
    infoBtn(){
    var idCode_reg = /^[1-9]\d{5}(10|11|12|13|14|15|16|17|18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/;//身份证
    // var nameReg = /^[\u4E00-\u9FA5]{2,10}$/;
    if(this.name==''){
            return Toast('姓名不能为空');
        }
    // if(!nameReg.test(this.name)){
    //         return Toast('姓名格式不正确');
    //     }
        if(this.cardNumber==''){
            return Toast('证件号码不能为空');
        }
        if (this.cardTypeValue == "01" && !idCode_reg.test(this.cardNumber)) {
            return Toast("请输入正确的证件号码！");
        }
        if(!this.checked){
            return Toast('请您勾选阅知《中国人寿财险互联网平台用户隐私保护政策》！');  
        }
        var data = {
            open_id: this.userDate.openId,
            lever: "1",//权限信息(2 二级权限 1 一级权限）
            name:this.name, //姓名
            type_card: this.cardTypeValue,//证件类型
            id_card:this.cardNumber,//证件号码
            change: 'n',//注册n 修改y
            relation: 1,//与本人关系（1本人 2亲属 3朋友 4其他）
            datasource: 'zgs',
            unionid: this.userDate.unionId,//新加入参uinionId
            user_id:this.userDate.userId,
            mobile_Phone: this.userDate.mobile
        }
        let _this = this;
        cloudApi.bindWithQuestion(data).then(function(res: any) {
            var data = JSON.parse(decodeURIComponent(window.atob(res.data.result)));
            console.log("录入三要素接口",data)
            var ifId = data.id ? data.id : "" //保存返回的id值，以便其他接口调用,如果有id就传id，没有就传空
            if (data.errorMes == "") {
                if (data.resMsg == "0") {
                    Dialog.alert({ title: '温馨提示',message: '您的信息填写有误，请检查证件号码或姓名是否填写正确，如有问题请致电4008695519，谢谢！'})
                }else if (data.resMsg == "1"||data.resMsg == "8"){
                    if (data.wrongAmount >= 10) {
                        Dialog.alert({ title: '温馨提示',message: '您已累计10次验证失败，请前往我的保险模块补充详细信息！'})
                    }else{
                        // sessionStorage.setItem("secondYZValue","0")
                        // let policyShow
                        // let plateNo
                        // if(data.policyType == "05"){//保类型为车险时，现只有车牌号，无保单 //车险日期
                           
                        //     if (data.plateNo == "") {//无保单号跳到保单验证页
                        //         policyShow ='policy'
                        //         plateNo = data.carPolicyNo;
                        //     } else {//跳到车牌号页面
                        //         plateNo =data.plateNo
                        //         if (data.plateNo.length > 7) { //如果是新能源汽车则显示绿色车牌
                        //         policyShow ='newCarPolicy'
                        //         } else {
                        //         policyShow ='carPolicy'   
                        //         }
                        //     }
                        // }else{//非车险日期
                        //    policyShow ='noCarPolicy'   
                        //    plateNo = data.noCarPolicyNo;
                        // }
                        // let routeString:any =_this.$route.query.route
                        // if(routeString){//从别的跳进来返回
                        //     _this.$router.push({path: 'checkInfo',query: {carPolicyNo:plateNo,ifId:ifId,policyShow:policyShow,route:routeString}});
                        // }else{
                        //    _this.$router.push({path: 'checkInfo',query: {carPolicyNo:plateNo,ifId:ifId,policyShow:policyShow}});
                        // } 
                        let faceParmas:any=JSON.stringify({
                            username:_this.name,
                            idCard:_this.cardNumber,
                            cardType:_this.cardTypeValue,
                            userId:_this.userDate.userId,
                            mobile:_this.userDate.mobile,
                            openId:_this.userDate.openId
                        })
                        sessionStorage.setItem("faceParmas",faceParmas)
                        let routeString:any =_this.$route.query.route
                        if(routeString){//从别的跳进来返回
                            _this.$router.push({path: 'face',query: {route:routeString}});
                        }else{
                           _this.$router.push({path: 'face'});
                        } 
                    }
                }else if (data.resMsg == "000000"){
                        let data={
                         idCard:_this.cardNumber,
                         mobile: _this.userDate.mobile,
                         idType: _this.cardTypeValue,
                         userId:_this.userDate.userId,
                        }
                        cloudApi.peaceOfMind(data).then(res => {
                            if(res.data.result.header.statusCode == '00000000'){
                                console.log('三要素绑定成功，调用绑定人员接口成功')
                            }
                        })
                       let routeString:any =_this.$route.query.route
                       if(routeString){//从别的跳进来返回
                           let route:any = JSON.parse(routeString)
                            _this.$router.push(route)
                        }else if(sessionStorage.getItem('sourceUrl')){//从小程序来
                            let htmlUrl:any =sessionStorage.getItem('sourceUrl')
                            wx.miniProgram.redirectTo({ 
                                url: '/pages/webview/webview?url='+encodeURIComponent(htmlUrl)+'&flag=1'
                            });
                        }else{
                            _this.$router.push("personalCard")
                        } 
                }else if(data.resMsg == "000001"){
                    Dialog.alert({ title: '温馨提示',message: '当前用户已绑定关系为本人的用户！'})
                }else{
                    Dialog.alert({ title: '温馨提示',message: '您的信息填写有误，请检查证件号码或姓名是否填写正确，如有问题请致电4008695519，谢谢！'})
                }
            }else{
                Dialog.alert({ title: '温馨提示',message: '验证失败，请检查证件号码或姓名是否填写正确，如有问题请致电4008695519，谢谢！'})
            }
        });
    }
    onConfirm(value:any, index:any) {
        this.idTypeSelectShow=false;
        this.cardType =this.cardTypeList[index].text;
        this.cardTypeValue =this.cardTypeList[index].value;
    }
    onCancel() {
        this.idTypeSelectShow=false;
    }
    clickLeft(){
      this.readEdBtnShow=false
    }
}
</script>
<style  lang="less" scoped>
.idCardInfo{
  background: #FAF9F7;
  min-height: 100%;
  font-size:16px;
  .nav{
        background: url("../../assets/images/myInfo/info_nav.png") no-repeat;
        background-size:100% 100%;
        width:100%;
        height:223px;
        // line-height:223px;
        text-align: center;
        color:#fff;
        padding-top:50px;
  }
  
  .info{
    background: #fff;
    border-radius:20px;
    margin:-110px 20px 0;
    padding:20px;
    box-shadow: 1px 5px 5px 1px #efefef;
    p{
        color:#00A08A;
        padding: 10px 15px;
        text-align: left;
    }
    .van-cell{
        line-height:24px;
        border-radius:24px;
        background: #F7F4EF;
    }
    .van-button--info{
        height:35px;
        line-height:32px;
        background-color: #22A088;
        border: 0.026667rem solid #22A088;
    }
  }
  .readed{
    padding: 30px 0;
    font-size: 13px;
    text-align: left;
    .van-checkbox{
        display:inline-block;
        vertical-align: middle;
    }
  }

}
</style>

